
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>

<html>
<head>

<script type="text/javascript">
$(document).ready(function() {

	var id_comprobante='${id_liquidacion}';	
	// creacion de la tabla
	jQuery("#tabla_detalle_liquidacion").jqGrid({ 
		url:'get_detalle_liquidacion?id_liquidacion='+id_comprobante,// url para obtener data
		mtype: 'GET',// metodo de solicitud
		datatype: "json",// formato de datos que representa la data
		colNames:['correlativo','tipo_contable','monto_asiento','CUENTA CONTABLE','DESCRIPCION','DEBE (D)','HABER (H)'],
		colModel:[ 
		           {name:'correlativo',index:'correlativo',hidden : true},
		           {name:'tipo_contable',index:'tipo_contable',hidden : true},
		           {name:'monto_asiento',index:'monto_asiento',hidden : true},
		           {name:'cuenta_contable',index:'cuenta_contable',width:60},
		           {name:'desc_cuenta',index:'desc_cuenta'},
		           {name:'monto_debe',index:'monto_debe', width:80,sorttype:'number',formatter:'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' }, align:"right",summaryType:'sum'},
		           {name:'monto_haber',index:'monto_haber', width:80,sorttype:'number',formatter:'number', formatoptions: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' }, align:"right",summaryType:'sum'}
		          ], 
		rowNum:20,
		loadComplete: function () {
			data= $('#tabla_detalle_liquidacion').jqGrid('getGridParam','data');
			var suma_debe =0;
			var suma_haber =0;
			$.each(data, function(i) {
				suma_haber+=(this.monto_haber)?this.monto_haber:0.00;
				suma_debe+=(this.monto_debe)?this.monto_debe:0.00;
			});
			jQuery("#tabla_detalle_liquidacion").jqGrid('setGridParam',{data:data}).trigger("reloadGrid");
			$(this).jqGrid('footerData','set', {desc_cuenta:"TOTAL ====>",monto_haber:suma_haber,monto_debe:suma_debe});
		},
		rowList:[20,40],
		pager: '#pager_detalle_liquidacion',
		viewrecords: true,
		 autowidth: true,
		//width:620,
		height:300,
		rownumbers: true,
		scrollOffset: 0,
		// sortname: 'monto_total',sort fijo
		// sortorder: "desc",sort fijo
		jsonReader: { 
			repeatitems : false
			  },
		emptyrecords: "No hay registros",
		loadonce:true,
		footerrow : true, userDataOnFooter : true// altRows:true,
		}); 
	// fin de la tabla

	// addons de la tabla
	jQuery("#tabla_detalle_liquidacion").jqGrid('navGrid', '#pager_detalle_liquidacion', {
		edit : false,
		add : false,
		del : false,
		refresh:false
	});
	
});

</script>
</head>

<body>
<h3 align="center"> DETALLE DE LIQUIDACION DE COBRANZA</h3>
<table border="0" width="100%" align="center">
	<tr>
		<td class="content-tabla">
			<table id="tabla_detalle_liquidacion" align="center"></table> <div id="pager_detalle_liquidacion"></div>
		</td>
	</tr>
</table>
</body>
</html>